<script lang="ts" setup>
import {onBeforeMount, onMounted, reactive, ref} from 'vue'
import busMitt from "@/uilts/mitt";
import {getMenu} from "@/api/api"
const isCollapse = ref(false)
const defaultOpens = ref<string[]>([]);
const handleOpen = (key: string, keyPath: string[]) => {
};

const handleClose = (key: string, keyPath: string[]) => {
};
const menuData = ref([{
    path: "control",
    name: "control",
    meta: {
      id: "1",
      name: "控制台",
      icon: "Platform",
      path: "/control",
      describe: "用于展示当前系统中的统计数据、统计报表及重要实时数据"
    }
  },
  {
    path: "auth",
    name: "auth",
    meta: {
      id: "2",
      name: "权限管理",
      icon: "Grid"
    },
    children: [
      {
        path: "",
        name: "user",
        meta: {
          id: "1",
          name: "用户管理",
          icon: "Avatar",
          path: "/user",
          describe: "管理员可以进行编辑，权限修改后需要登出才会生效"
        }
      },
      {
        path: "menu",
        name: "menu",
        meta: {
          id: "2",
          name: "菜单管理",
          icon: "Menu",
          path: "/menu",
          describe: "菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取"
        }
      },
      {
        path: "roleMenu",
        name: "roleMenu",
        meta: {
          id: "3",
          name: "角色管理",
          icon: "UserFilled",
          path: "/roleMenu",
          describe: "菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取"
        }
      }
    ]
  },
  {
    path: "vppz",
    name: "vppz",
    meta: {
      id: "3",
      name: "DIDI陪诊",
      icon: "BellFilled"
    },
    children: [
      {
        path: "",
        name: "staff",
        alias: [
          "staff"
        ],
        meta: {
          id: "1",
          name: "陪护管理",
          icon: "Checked",
          path: "/vppz/staff",
          describe: "陪护师可以进行创建和修改，设置对应生效状态控制C端选择"
        }
      },
      {
        path: "order",
        name: "order",
        meta: {
          id: "2",
          name: "订单管理",
          icon: "List",
          path: "/vppz/order",
          describe: "C端下单后可以查看所有订单状态，已支付的订单可以完成陪护状态修改"
        }
      }
    ]
  },
  {
    path: "vppz",
    name: "vppz",
    meta: {
      id: "4",
      name: "药品管理",
      icon: "BellFilled"
    },
    children: [
      {
        path: "",
        name: "staff",
        alias: [
          "staff"
        ],
        meta: {
          id: "1",
          name: "中药管理",
          icon: "Checked",
          path: "/vppz/staff",
          describe: "陪护师可以进行创建和修改，设置对应生效状态控制C端选择"
        }
      },
      {
        path: "order",
        name: "order",
        meta: {
          id: "2",
          name: "西药管理",
          icon: "List",
          path: "/vppz/order",
          describe: "C端下单后可以查看所有订单状态，已支付的订单可以完成陪护状态修改"
        }
      },
      {
        path: "order",
        name: "order",
        meta: {
          id: "2",
          name: "中成药",
          icon: "List",
          path: "/vppz/order",
          describe: "C端下单后可以查看所有订单状态，已支付的订单可以完成陪护状态修改"
        }
      }
    ]
  },
  {
    path: "system",
    name: "system",
    meta: {
      id: "5",
      name: "服务器",
      icon: "setting",
      path: "/system",
      describe: "检查系统相关信息"
    }
  },
  {
    path: "billing",
    name: "billing",
    meta: {
      id: "5",
      name: "账单管理",
      icon: "Notebook",
      path: "/billing",
      describe: "记录账单信息"
    }
  },
  {
    path: "auth",
    name: "auth",
    meta: {
      id: "7",
      name: "Ai",
      icon: "Mic"
    },
    children: [
      {
        path: "chat",
        name: "ai",
        meta: {
          id: "7",
          name: "Ai聊天室1",
          icon: "ChatDotRound",
          path: "/chat",
          describe: "Ai聊天室"
        }
      },
      {
        path: "chat2",
        name: "ai",
        meta: {
          id: "7",
          name: "对轮对话",
          icon: "ChatDotRound",
          path: "/chat.do",
          describe: "Ai聊天室"
        }
      }
    ]
  }
  ])
// console.log(menuData[0])
function sendDescribe(describe:object){
  busMitt.emit('describe',describe)
}
onMounted(() =>{
  getIsCollapse();
})
onBeforeMount(() =>{
})
function getIsCollapse() {
  busMitt.on('isCollapse', (res:any) =>{
    isCollapse.value = res
  })
}
function sendMenToTag(vel:{meta:any}){
  // console.log(vel.meta)
  busMitt.emit('menuTag', vel.meta || {});
}

function getMenuData() {
  getMenu().then((res:any) =>{
    console.log(res)
    menuData.value = res;
  })
}
</script>

<template>
  <div class="menu-asidebar">
    <el-menu
        class="el-menu-vertical-demo"
        router
        default-active="/control"
        :default-openeds="['2']"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
    >
        <div class="sidebar-menu-title">
          <span>喵喵管理</span>
        </div>
        <template v-for="(item, index) in menuData" :key="index">
          <el-menu-item v-if="!item.children" :index="item.meta.path" @click="sendMenToTag(item)">
            <el-icon>
              <component :is="item.meta.icon" />
            </el-icon>
<!--            <span>{{item.meta.icon}}</span>-->
            <template #title>{{ item.meta.name }}</template>
          </el-menu-item>
          <el-sub-menu v-else :index="item.meta.id">
            <template #title>
              <el-icon>
                <component :is="item.meta.icon" />
              </el-icon>
<!--              <span>{{item.meta.icon}}</span>-->
              <span>{{ item.meta.name }}</span>
            </template>
            <el-menu-item v-for="children in item.children" :key="children.meta.path" :index="children.meta.path" @click="sendMenToTag(children)">
              <el-icon>
                <component :is="children.meta.icon" />
              </el-icon>
<!--              <span>{{item.meta.icon}}</span>-->
              <template #title>{{ children.meta.name }}</template>
            </el-menu-item>
          </el-sub-menu>
        </template>
    </el-menu>
  </div>
</template>

<style>
.el-menu-vertical-demo {
  border-right: none;
}

.el-menu-item:hover{
  background-color: var(--el-menu-hover-bg-color);
}
.el-menu-item.is-active{
  background-color: var(--el-menu-hover-bg-color);
}
.el-sub-menu__title:hover{
  background-color: var(--el-menu-hover-bg-color);
}
/*.menu-asidebar{*/
/*  background-color: #a8abb2 !important;*/
/*}*/

.sidebar-menu-title {
  margin: 0 12px 13px auto;
  padding-top: 8px;
  background-color: var(--el-menu-bg-color);
  color: var(--el-menu-text-color);
  height: 40px;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 22px;
  transition: all 0.3s ease;
}
</style>
